<template>
	<div class="system-user-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">

			<div class="system-user-search mb15">
				<el-row :gutter="35">

					<el-col :xs="24" :sm="12" :md="5" :lg="5" :xl="5" class="mb10">
						<el-form-item label="">
							<el-input size="small" placeholder="请输入姓名、电话" v-model="state.tableData.param.keywords" class="w100" clearable></el-input>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="5" :lg="5" :xl="5" class="mb10">
						<el-select size="small" v-model="state.tableData.param.class_id" class="w100" placeholder="请选择类型表单">
							<el-option label="全部" value="0"></el-option>
							<el-option
								v-for="(item) in state.formtypeList"
								:key="item.id"
								:label="item.class_name"
								:value="item.id">
							</el-option>
						</el-select>
					</el-col>

					<el-col :xs="24" :sm="12" :md="5" :lg="5" :xl="5" class="mb10">
						<el-select size="small" v-model="state.tableData.param.status" class="w100" placeholder="请选择跟进状态">
							<el-option label="全部" value="0"></el-option>
							<el-option
								v-for="(item, index) in state.statusList"
								:key="index"
								:label="item"
								:value="index">
							</el-option>
						</el-select>
					</el-col>

					<el-col :xs="24" :sm="12" :md="5" :lg="5" :xl="5">
						<el-form-item label="">
							<el-date-picker
								v-model="state.tableData.param.createTime"
								type="datetimerange"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								format="YYYY-MM-DD HH:mm:ss"
								value-format="YYYY-MM-DD HH:mm:ss"
								size="small"
								clearable
							/>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="4">
						<el-button size="small" type="primary" class="ml10 search-button" @click="onSearchSubmit()">
							<el-icon><ele-Search/></el-icon>
							查询
						</el-button>
						<el-button size="small" class="ml10" @click="onResetSubmit()">
							<el-icon><ele-SwitchButton/></el-icon>
							重置
						</el-button>
					</el-col>

				</el-row>
			</div>
			<el-table
				:data="state.tableData.data"
				v-loading="state.tableData.loading"
				border size="small"
				:header-cell-style="{backgroundColor: '#f8f8f8', color: '#010101'}"
				highlight-current-row
				@sort-change="onTableSortChange"
				style="width: 100%"
			>
				<el-table-column label="序号" type="index" show-overflow-tooltip min-width="60" align="center"></el-table-column>
				<el-table-column label="类型表单" prop="class_name" show-overflow-tooltip min-width="90" align="center" sortable></el-table-column>
				<el-table-column label="姓名" prop="name" show-overflow-tooltip min-width="100" align="center"></el-table-column>
				<el-table-column label="电话" prop="mobile" show-overflow-tooltip min-width="100" align="center"></el-table-column>
				<el-table-column label="咨询内容" prop="content" show-overflow-tooltip min-width="150" align="center">
					<template v-slot="scope">
						<el-popover
							placement="bottom"
							title="咨询内容"
							:width="300"
							trigger="click"
							:content="scope.row.content"
						>
							<template #reference>
								<el-text truncated style="cursor: pointer;">{{ scope.row.content }}</el-text>
							</template>
						</el-popover>

					</template>
				</el-table-column>
				<el-table-column label="IP地址" prop="address" show-overflow-tooltip min-width="140" align="center"></el-table-column>
				<el-table-column label="咨询状态" prop="status" show-overflow-tooltip min-width="90" align="center" sortable>
					<template v-slot="scope">
						<el-tag :type="scope.row.status === 1 ? 'warning' : (scope.row.status === 2 ? 'success' : (scope.row.status === 3 ? 'danger' : (scope.row.status === 4 ? 'primary' : 'info')))">{{ scope.row.status_text }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="提交时间" prop="create_time" show-overflow-tooltip min-width="140" align="center"></el-table-column>

                <el-table-column label="操作" min-width="170" align="center" header-align="center" fixed="right">
                    <template #default="scope">
                        <el-row style="display: flex; align-items: center; justify-content: space-around">
	                        <el-button v-if="scope.row.status === 0 || scope.row.status === 3 || scope.row.status === 4" disabled size="small" plain type="info">添加跟进</el-button>
	                        <el-button v-else size="small" plain type="primary">添加跟进</el-button>
                            <el-button plain Primary color="#626aef" size="small" @click="onOpenDetail(scope.row.id)">查看详情</el-button>
                        </el-row>
                    </template>
                </el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[15, 30, 50]"
				v-model:current-page="state.tableData.param.page"
				background
				v-model:page-size="state.tableData.param.page_size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.total"
			>
			</el-pagination>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="typeForm">
import {onMounted, reactive} from 'vue';
import { useRouter } from "vue-router";
import { useTypeFormtApi } from '/@/api/consult/typeform';


// 定义变量内容
const router = useRouter();
const state = reactive({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			page: 1,
			page_size: 15,
			keywords: '',
			class_id: '',
			status: '',
			createTime: '',
			sort_class_name: '',
			sort_status: '',
		},
	},
	formtypeList: [], // 表单类型列表
	statusList: [], // 跟进状态列表
});

// 重置
const onResetSubmit = () => {
	state.tableData.param = {
		page: 1,
		page_size: 15,
		keywords: '',
		class_id: '',
		status: '',
		createTime: '',
		sort_class_name: '',
		sort_status: '',
	};
	onSearchSubmit();
}

// 排序
const onTableSortChange = (val: any) => {
	if (val.prop === 'class_name') {
		state.tableData.param.sort_class_name = val.order === 'descending' ? 'desc' : 'asc';
	}
	if (val.prop === 'status') {
		state.tableData.param.sort_status = val.order === 'descending' ? 'desc' : 'asc';
	}
	onSearchSubmit();
};

// 搜索
const onSearchSubmit = async () => {
	state.tableData.loading = true;

	await useTypeFormtApi().getCustomerConsultData(state.tableData.param).then((res) => {
		state.tableData.data = res.data.list;
		state.tableData.total = res.data.total;
	});
	setTimeout(() => {
		state.tableData.loading = false;
	}, 100);
};

// 初始化表格数据
const getTableData = async () => {
	state.tableData.loading = true;

	await useTypeFormtApi().getCustomerConsultData(state.tableData.param).then((res) => {
		console.log('初始化表格数据', res.data);
		state.tableData.data = res.data.list;
		state.tableData.total = res.data.total;
		state.formtypeList = res.data.form_type_list;
		state.statusList = res.data.status_list;
	});
	setTimeout(() => {
		state.tableData.loading = false;
	}, 100);
};

const onOpenDetail = (row: number) => {
	router.push({
		name: 'consult-typeform-typeform-detail',
		params: {id: row}
	})
};

// 分页改变
const onHandleSizeChange = (val: any) => {
	state.tableData.param.page_size = val;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: any) => {
	state.tableData.param.page = val;
	getTableData();
};
// 页面加载时
onMounted(() => {
	getTableData();
});
</script>

<style scoped lang="scss">
.system-user-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;

		.el-table {
			flex: 1;
		}
	}
}
</style>
